<template>
    <div>
        <!--form-->
        <el-card class="box-card" title="新增">
            <div slot="header" class="clearfix">
                <span>{{form.id ? "编辑" : "新建"}}</span>
            </div>
            <el-form :model="form" :rules="formRules" ref="form">
                <el-form-item label="日期" :label-width="forLabelWidth" prop="date">
                    <!--el-form-item 绑定表单样式，label表单的名称， formLabelWidth 设置 label 的宽度，设置 prop 进行规则校验-->
                    <el-date-picker v-model="form.date" value-format="yyyy-MM-dd" type="date" placeholder="select date"></el-date-picker>
                </el-form-item>

                <el-form-item label="name" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>

                <el-form-item label="phone" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" type="tel"></el-input>
                </el-form-item>

                <el-form-item label="address" :label-width="formLabelWidth" prop="address">
                    <el-input v-model="form.address"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="submitForm">OK</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>

</template>

<script>

import { checkPhoneValidator } from "../../../utils/validator";
import tableData from "./data";

export default {
    data() {
        return {
            formLabelWidth: "120px",
            form: {},
            formRules: {
                date: [
                    { type: "string", required: true, message: "select date", trigger: "blur"}
                ],
                name: [
                    { required: true, message: "input name", trigger: "blur"},
                    { min: 2, max: 10, message: "长度在 2 到 10 之间", trigger: "blur"}
                ],
                phone: [
                    { required: true, validator: checkPhoneValidator, trigger: "blur"}
                ]
            }
        }
    },

    watch: {
        // 对路由变化作出响应
        "$route" () {
            this.updateFormItem();
        }
    },

    created() {
        this.updateFormItem();
    },

    methods: {
        // 获取路由信息，填充
        updateFormItem() {
            const id = this.$route.params.id;
            const formItem = tableData.find(x => x.id === id);
            if(formItem) {
                this.form = {...formItem};
            } else {
                this.form = {};
            }
        },

        updateTableItem(item = {}) {
            // 检查是否有 id，有则更新，没有则新增
            if(item.id !== undefined) {
                let itemIndex = tableData.findIndex(x => x.id === item.id);
                if(itemIndex > -1) {
                    tableData.splice(itemIndex, 1, {...item});
                }
            } else {
                // 添加到列表中
                tableData.push({...item, id: tableData.length+1});
            }
        },

        submitForm() {
            // Element 表单校验规则配置，请查看https://element.eleme.cn/#/zh-CN/component/form
            this.$refs["form"].validate((valid) => {
                if(valid) {
                    // 更新数据
                    this.updateTableItem(this.form);
                    // 跳转回列表
                    this.$router.push({name: "ProductList"});
                } else {
                    // 校验失败
                    return false;
                }
            })
        }
    }
}
</script>

<style scoped>

</style>